<template>
    <div class="addInfo">
        <mt-header fixed title="任务清单新增" id="header1"></mt-header>
         <div class="back" @click="backPage">
            <img src="../../../public/image/back.png" alt="" />
        </div>
        <div class="addContent">
            <el-form ref="form" :model="taskData" label-width="100px">
                <el-form-item label="任务名称">
                    <el-input v-model="taskData.taskName" placeholder="请输入任务名称"></el-input>
                </el-form-item>
                <el-form-item label="任务类型">
                    <el-select v-model="query1" class="select">
                        <el-option v-for="(item,index) in taskData.taskType" :key="index" :label="item.name" :value="item.code"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="海事局" class="select">
                     <el-select v-model="query2" @change="selectItem">
                        <el-option v-for="(item,index) in taskData.marineBoardCode" :key="index" :label="item.orgName" :value="item.orgName"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="雷达站" class="select">
                     <el-select v-model="query3" @change="selectRadarItem" @focus="judgeCondition">
                        <el-option v-for="(item,index) in taskData.radarStationCode" :key="index" :label="item.orgName" :value="item.orgCode"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="开始时间">
                    <el-col >
                        <el-date-picker type="date" placeholder="yy-mm-dd" v-model="taskData.startDate" style="width: 85%;"></el-date-picker>
                    </el-col>
                </el-form-item>
                <el-form-item label="结束时间">
                    <el-col>
                        <el-date-picker type="date" placeholder="yy-mm-dd" v-model="taskData.endDate" style="width: 85%;"></el-date-picker>
                    </el-col>
                </el-form-item>

                <!-- 实施对象 -->
                <el-form-item label="实施对象">
                    <el-input v-model="taskData.taskObj" @focus="getDevice">
                        <i slot="suffix" class="el-input__icon el-icon-edit"></i>
                    </el-input>
                </el-form-item>

                 <!-- 设备树  选择实施对象 弹窗 -->
                <el-dialog title="任务清单新增" :visible.sync="dialogFormVisible">
                    <el-form class="dataTree">
                        <el-form-item label="选择实施对象" :label-width="formLabelWidth">
                            <el-tree 
                                :data="deviceData"
                                :props="defaultProps"
                                @node-click="handleNodeClick"
                                highlight-current
                            >
                            <span class="custom-tree-node" slot-scope="{ node, data }">
                                <span><img :src="node.icon" />{{node.label}}</span>
                            </span>
                            </el-tree>
                        </el-form-item>
                    </el-form>
                    <div slot="footer" class="dialog-footer">
                        <el-button type="primary" plain @click="saveMenuData">保存</el-button>
                        <el-button type="primary" plain @click="dialogFormVisible = false">关闭</el-button>
                    </div>
                </el-dialog>

                <!-- 海事局审核人-->
                <el-form-item label="审核人">
                    <el-input v-model="taskData.personName" @focus="findHsjUser">
                        <i slot="suffix" class="el-input__icon el-icon-edit"></i>
                    </el-input>
                </el-form-item>

                <!-- 海事局审核人 弹窗 -->
                 <el-dialog title="任务清单新增" :visible.sync="dialogFormVisible1">
                    <el-form>
                        <el-form-item label="选择实施对象" :label-width="formLabelWidth">
                            <el-table :data="examineData"  border style="width: 100%" id="table" @select="selectData">
                                <el-table-column type="selection"></el-table-column>
                                <el-table-column type="index"></el-table-column>
                                <el-table-column  prop="userName" label="用户名称"></el-table-column>
                                <el-table-column  prop="phone"  label="电话" width="120"></el-table-column>
                                <el-table-column  prop="roleId"  label="角色"></el-table-column>
                            </el-table>
                        </el-form-item>
                    </el-form>
                    <div>提示:向右滑动查看详细信息</div>
                    <div slot="footer" class="dialog-footer">
                        <el-button type="primary"   @click="prevPage()" class="prev" :disabled="isDisabled">上一页</el-button>
                        <el-button type="primary"   @click="nextPage()" class="next" :disabled1="isDisabled">下一页</el-button>
                        <el-button type="primary"  @click="saveExamineData">保存</el-button>
                        <el-button type="primary"  @click="dialogFormVisible1= false">关闭</el-button>
                    </div>
                </el-dialog>
                <el-form-item label="任务内容">
                    <el-input type="textarea" v-model="taskData.content" style="width:95%;" :rows="4"></el-input>
                </el-form-item>
                <el-form-item id="el_form">
                    <el-button type="primary"  @click="savePlan">保存并生成计划</el-button>
                </el-form-item>
            </el-form>
        </div>
    </div>
</template>
<script>
    import addInfo from './js/addInfo.js';
	export default addInfo
</script>
<style scoped lang="scss">
    @import "./scss/addInfo.scss";
</style>